<!DOCTYPE html>
<html>
	<head>
		<title>拖拽</title>
		<meta charset="utf-8">
		<style>
			div{border:1px solid black;margin:auto;}
			img{width:150px;height:150px;position:absolute;top:150px;left:200px;}
			.box{width:148px;height:148px;float:left;position: relative;}
			.img{width:150px;height:150px;position: relative;}
			div img{position:static;}
			.outer{width:450px;height:450px;}
			p{font:bold 30px "微软雅黑";position:absolute;left:960px;top:300px;text-align:center;}
		</style>
	</head>
	<body>	
		<div class="img">
			<img src="15.jpg">
		</div>
		<div class="outer">
			<div id="0" class="box"></div>
			<div id="1" class="box"></div>
			<div id="2" class="box"></div>
			<div id="3" class="box"></div>
			<div id="4" class="box"></div>
			<div id="5" class="box"></div>
			<div id="6" class="box"></div>
			<div id="7" class="box"></div>
			<div id="8" class="box"></div>
		</div>
		<img id="10" class="mov" src="1.gif">
		<img id="11" class="mov" src="2.gif">
		<img id="12" class="mov" src="3.gif">
		<img id="13" class="mov" src="4.gif">
		<img id="14" class="mov" src="5.gif">
		<img id="15" class="mov" src="6.gif">
		<img id="16" class="mov" src="7.gif">
		<img id="17" class="mov" src="8.gif">
		<img id="18" class="mov" src="9.gif">
		<p></p>
		<script>
			var img= document.querySelectorAll(".mov"),
				div= document.querySelectorAll(".box"),
				arr= [],
				b= 0;
				//给img绑定拖动事件
				img.forEach(function(img){
					img.ondragstart= function(e){
						// console.log(11);
						e= e|| window.event;
						//记录当前对象唯一标识
						e.dataTransfer.setData("imgId", this.id);
					}
				});								
				//给div绑定事件
				div.forEach(function(div){
					div.ondragover= function(e){
						e= e|| window.event;
						//阻止默认事件
						e.preventDefault();
					}
					div.ondrop= function(e){
						e= e|| window.event;
						//获取唯一标识
						var imgid= e.dataTransfer.getData("imgId");
						//获取拖动的元素
						var imgEle= document.getElementById(imgid);	
						//将拖动的元素放入div中					
						this.appendChild(imgEle);
						//如果div和img匹配
						if(this.id== ( Number(imgid)- 10 )){
							//将div的id放入数组中
							arr.push( this.id )
							//赋空匹配的img的拖动事件
							imgEle.ondragstart= null;					
						}
						//如果九张都匹配了刷新页面再来一局
						if(arr.length== 9){
							//清空定时器
							clearInterval(1);
							var x= 4;
							//刷新倒计时
							num=setInterval(function(){
								x--;
								//弱爆了
								document.getElementsByTagName("p")[0].innerHTML= x+"</br>您完成游戏的时间是："+b+"秒。</br>超过全世界0.1%的选手</br>弱爆了";
							},1000);							
							setTimeout(function(){	
							//刷新页面							
								location.reload();
							},4000);
						}
						// arr.length== 9&& location.reload();
					}
				});
				//将图片打乱
				function aim(){
					for(var a= 0; a< img.length; a++){
						img[a].style.left= parseInt(Math.random()*400)+ "px";
						img[a].style.top= parseInt(Math.random()*500)+ "px";
					}
					num=setInterval(function(){
						num= 1;
						b++;
					},1000)
				}
				aim();
		</script>
	</body>
</html>